<template>
	<div class="sortList clearfix">
		<div class="sort_left fl">
			<div class="sort_lbox" v-for="val,index in leftdata" :key="1+index" @click="add(index,val.id)"
				:class="{curr:activeKey==index}">
				<span class="sort_icon" :class="val.classname"></span>
				{{val.text}}
			</div>
			<div class="sort_lbox" v-for="value,index in lastdata" :key='"a"+index'>
				<span class="sort_icon" :class="value.classname"></span>
				<router-link to="/Cheack?id=0">{{value.text}}</router-link>
			</div>
		</div>
		<div class="sort_right fl">
			<div class="sort_rbox clearfix m-center flowers">
				<div v-for="value,index in rightdata" :key='index'>
					<div class="sort_rbox2">
						<i class="col" :class="value.classname"></i>
						{{value.text}}
					</div>
					<div class="sort_rbox3 clearfix">
						<router-link :to="'/Cheack?id='+0" class="fl" v-for="vals,index in value.data3" :key='index'>
							<div class="tit">
								{{vals.text}}
							</div>
						</router-link>
					</div>
				</div>
			</div>
			<!-- <br> -->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeKey: 0,
				content: false,
				sortList:[]
			};
		},
		methods: {
			add(index,id) {
				this.activeKey = index
				this.$emit('show',index)
			}
		},
		props:['leftdata','rightdata','lastdata'],
	};
</script>

<style>
	.sortList {
		height: 100%;
		width: 100%;
	}

	.sortList .sort_left {
		width: 20%;
		font-size: 1rem;
		text-align: center;
		border-bottom: 1px solid #ddd;
		position: fixed;
		top: 56px;
		bottom: 0;
		background: #f5f5f5;
	}

	.sortList .sort_right {
		width: 80%;
		background-color: #fff;
		font-size: 1rem;
		position: absolute;
		right: 0;
		top: 56px;
		bottom: 56px;
	}



	.sortList .sort_left .sort_lbox {
		width: 70%;
		margin: 0 auto;
		border-bottom: 2px solid #F5F5F5;
		padding-bottom: 7px;
	}

	.sortList .sort_left .curr {
		color: #ff6700;
		border-bottom: 2px solid #ff6700;
	}

	.sortList .sort_left .sort_lbox .sort_icon {
		display: block;
		margin: 0 auto;
		width: 25px;
		height: 25px;
		background-repeat: no-repeat;
		background-image: url(http://i.huasongwang.com/i/c/cateicon.png);
		background-size: 58px;
		margin-bottom: 0px;
		margin-top: 5px;
	}

	.iconhua {
		background-position: 1px -5px;
	}

	.iconhualan {
		background-position: 1px -33px;
	}

	.iconlvzhi {
		background-position: 1px -62px;
	}

	.iconliping {
		background-position: 0px -116px;
	}

	.iconyong {
		background-position: -0px -140px;
	}

	.iconRe {
		background-position: 0px -167px;
	}

	.curr .iconhua {
		background-position: -28px -5px;
	}

	.curr .iconhualan {
		background-position: -28px -33px;
	}

	.curr .iconlvzhi {
		background-position: -28px -62px;
	}

	.curr .iconliping {
		background-position: -28px -116px;
	}

	.curr .iconyong {
		background-position: -29px -140px;
	}

	.curr .iconRe {
		background-position: -29px -167px;
	}

	.sortList .sort_right .sort_rbox {
		/* display: none; */
		padding-bottom: 100px;
	}

	.sortList .sort_right .sort_rbox.curr {
		display: block;
	}

	.sort_rbox2 {
		line-height: 30px;
		font-size: .9rem;
		padding-left: 10px;
		color: #000000;
		background-color: #FCFCFC;
	}

	.sort_rbox3 a {
		width: 25%;
		margin-left: 6.25%;
		margin-bottom: 5px;
	}

	.sort_rbox3 .tit {
		font-size: 0.875rem;
		line-height: 25px;
		font-weight: 200;
		text-align: left;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: normal;
		color: #666666;
	}

	.col {
		width: 10px;
		height: 10px;
		vertical-align: middle;
		display: inline-block;
		border-radius: 5px;
		margin-right: 10px;
	}

	.col1 {
		background-color: #ED5564;
	}

	.col2 {
		background-color: #AC92ED;
	}

	.col3 {
		background-color: #4FC0E8;
	}

	.col4 {
		background-color: #A0D468;
	}

	.col5 {
		background-color: #EC87BF;
	}

	.col6 {
		background-color: #FFCE55;
	}
</style>
